<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .div1{background:#000080;border: 1px solid red}
        .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
        .left{float:left;width:20%;height:200px;background:#DDD}
        .right{float:right;width:30%;height:80px;background:#DDD}
        /*清除浮动代码*/
        .clearfloat{clear:both}
    </style>
</head>
<body>
    <div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="clearfloat"></div>
    </div>
<div class="div2">div2</div>
</body>
</html>